JSONP & Jquery对它的调用(7-4)

JSONP

？jsonp数据请求当中，服务器返回给客户端的内容格式都有可能是什么格式的
答:根据Jsonp的原理是服务端把数据和客户端传送的函数名拼接到一块返回给客户端，理论上什么格式都可以（普通字符串，json字符串），一般项目中返回json字符串

JSONP与AJAX

  • [x] JSONP和AJAX相同
    • [ ] 都是客户端—发送请求—>服务器端
      • 给服务器端交互数据

  • [x] JSONP和AJAX区别

    • [ ] AJAX属于同源策略

    • [ ] JSONP属于非同源策略(跨域请求)

      区分同源和非同源：
      用当前页面的地址 && 数据请求的接口地址

    • [x] 协议
    • [x] 域名或者IP
    • [x] 端口号
    • 三个相同为同源策略-->AJAX获取;
    • 有一个不同为非同源-->一般用JSONP获取;


      例子
    • 当前页面的URL地址获取数据
      http://localhost:63342/***/1.html
      • 同源获取—-本地同一服务下的data.txt中内容
        请求数据的地址 http://localhost:63342/***/data.txt
      • 非同源获取—获取腾讯中的数据
        请求数据的地址 http://matchweb.sports.qq.com/**/calendar

JSONP的原理

  • [x] 条件：JSONP请求需要对方的服务器支持

  • [x] JSONP利用了SCRIPT原理

    • 在<script>中，没有同源跨域这一说,只要给SRC地址合法，内容就能请求回来

以本地请求本地创建的服务器中内容为例

  • [ ] 1) 首先把需请求的数据（跨域的API数据接口的地址）赋值给SCRIPT的SRC

  • [ ] 2) 把当前页面中的某一个函数名当做参数值，传递给跨域的服务器(URL问号传参:?callback=fn)

    1
    <script type="text/javascript" src="http://localhost/Jsonpget?requestcall=requestFn"></script><!--拼接好后发送请求-->

  • [ ] 3) 服务器接收到你的请求后，需要进行特殊的处理(把传递的函数名fn和它需要给你的数据拼接成一个字符串)

    • 例如 : 传递进去的函数名是fn，它准备好的数据是 fn([{"name":"li"}]) （以参数的方式传递给fn）
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
       //->JSONP的处理（服务端）
      if (pathname === "/Jsonpget") {
          //->接收客户端传递进来的函数名(跟客户端script里问号传参的函数名要一致)
          var fnName = query["requestcall"];//?requestcall=requestFn解析这一句
          //->准备数据
          var con = fs.readFileSync("./custom.json", "utf-8");//fn的参数，什么样的都可以，一般是json格式的字符串
         
          //->返回给客户端内容
          res.writeHead(200, {'content-type': 'text/javascript;charset=utf-8;'});
          res.end(fnName + '(' + con + ',a,b)');//a,b必须在请求数据的页面定义
      }

  • [ ] 4) 最后跨域的服务器把准备的数据通过HTTP协议返回给客户端，执行fn，并将数据传递给fn。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //客户端
    <script charset="utf-8" type="text/javascript">
        var a=10,b=20;
        function requestFn(yourData) {
            console.log(arguments);
            console.log(a+b);
        }
    </script>    
    <script type="text/javascript" src="http://localhost/Jsonpget?requestcall=requestFn"></script><!-- /Jsonpget要与服务端API地址一致， ?requestcall=requestFn又客户端传递，服务端要保持一致-->

jQuery调用Ajax和JSONP

  • 引入jQuery和自制Ajax函数库

    1
    2
    <script charset="utf-8" type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script charset="utf-8" type="text/javascript" src="js/ajax.js"></script>

  • [x] 原生的AJAX

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     ajax({
        url: "data.txt",
        type: "get",
        dataType: "json",
        async: false,
        data: null,
        // getHead: function() {},
        success: function(data) {
            console.log(data);
        }
    })

  • [x] Jquery的AJAX（需要自己搭建服务端）

    • dataType: “json”
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      ajax({
             url: "data.txt",
             type: "get",
             dataType: "json",
             data: null,
             async: true,
             timeout: 3000, //->设置超时时间 一般都设定3000ms
             cache: false, //->false(设定GET请求的时候不走缓存数据清除缓存原理其实就是在URL末尾加随机数,),默认是true
             success: function(data) { //data是请求回来的数据
                 console.log(data);
             },
             error: function() {
                 console.log("请求数据失败")
             }
         });

  • [x] Jquery的JSONP

    • dataType: “jsonp”
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      $.ajax({
              url: "http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
              // type:"get",//JSONP都是GET不用写
              dataType: "jsonp",
              jsonpCallback: "fn", //->不使用jQuery自动生成的，自定义传递给服务器的函数名fn
              jsonp: "cb", //->把传递函数名的那个默认形参callback变为cb
              success: function(data) {
                  console.log(data);
              }
          });
          //->请求的地址变为：http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&cb=fn&_=1499436495312